<template>
  <div class="city overpage">
    <!-- 搜索栏 -->
    <van-search
      v-model="searchValue"
      show-action
      placeholder="城市\区域\位置"
      shape="round"
      @search="onSearch"
      @cancel="onCancel"
    />

    <!-- 标签页 -->
    <van-tabs v-model:active="active" color="var(--color)" line-height="2px">
      <template v-for="(value, key, index) in allCities" :key="index">
        <van-tab :title="value.title">
          <div class="content">
            <cityGroup :groupData="value" />
          </div>
        </van-tab>
      </template>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import usecityStore from "../../stores/modules/cityStore";
import cityGroup from "./cpns/city-group.vue";
// 搜索框处理
const active = ref();
const router = useRouter();
const searchValue = ref("");
const onCancel = () => {
  router.back();
};
const onSearch = () => {
  console.log("城市搜索");
};

// 向cityStore请求数据
const cityStore = usecityStore();
cityStore.fetchAllCitiesData(); // 调用Action
const { allCities } = storeToRefs(cityStore); // 解构取值
</script>

<style lang="less" scoped>
</style>
